<template>
  <el-dialog title="HS编码选择" width="60%" center :visible="invitor" @close="closeWin" >
    <el-row :gutter="20" style="margin-bottom:10px">
        <el-col :span="12">
            <el-input
                placeholder="请输入商品编码"
                size="mini"
                v-model="hsCode"
              >
            </el-input>
        </el-col>
    </el-row>
    <el-table 
      :data="gridData" 
      empty-text="没有匹配数据"
      @row-click="rowCellClick"
      @row-dblclick="selectData" 
      highlight-current-row
      height = 350
      border
    >
        <el-table-column property="hsCode" label="商品编码" min-width="80">
          <template slot-scope="scope">
            <p v-html='scope.row.hsCode_show'></p>
          </template>
        </el-table-column>
        <el-table-column property="goodsCnName" label="商品名称" min-width="200"></el-table-column>
        <el-table-column property="firstUnitName" label="第一单位" min-width="60"></el-table-column>
        <el-table-column property="secondUnitName" label="第二单位" min-width="60"></el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200, 300]"
        :page-size="currentPageSize"
        background
        layout="total,sizes, prev, pager, next"
        :total="totalNo"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="sureSelectData">确 定</el-button>
        <el-button size="mini" @click="hide">取 消</el-button>
    </div>
   </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
export default {
  name: 'GetCode',
  props: ['invitor', 'goodNo'],
  data() {
    return {
      currentPage: 1,
      currentPageSize: 20,
      curIndex: -1,
      totalNo: 0,
      gridData: [],
      formLabelWidth: '120px',
      hsCode: ''
    }
  },
  watch: {
    invitor(cur) {
      if (cur === true) {
        this.currentPage = 1
        this.hsCode = this.goodNo
        this.searchData()
      }
    },
    hsCode(cur) {
      this.hsCode = cur
      this.searchData()
    }
  },
  methods: {
    searchData(p = 1, pagesize = 20) {
      const _hsCode = this.hsCode
      let searchObj = {}
      if (_hsCode) {
        searchObj = { hsCode: new RegExp(_hsCode) }
      }
      this.findGoodDataByFilter(searchObj, p, pagesize).then(res => {
        this.gridData = res.data.map(item => {
          item.hsCode_show = this.getHighlightWord(item, 'hsCode')
          return item
        })
        this.totalNo = res.sum
        this.curIndex = -1
      })
    },
    getHighlightWord(row, key) {
      const searh_val = this[key]
      return row[key].split(searh_val).join('<span style="color:rgb(64, 158, 255)">' + searh_val + '</span>')
    },
    hide() {
      this.$emit('changingType', 'false')
    },
    // 获取商品信息
    findGoodDataByFilter(filterOb = {}, p = 1, pagesize = 20) {
      p = p - 1
      return new Promise((resolve) => {
        this.$db.goodsData.find(filterOb).skip(p).limit(pagesize).exec((err, docs) => {
          this.$db.goodsData.count(filterOb).exec((err2, docs2) => {
            resolve({
              data: docs,
              sum: docs2,
              err
            })
          })
        })
      })
    },
    handleSizeChange(val) {
      this.currentPageSize = val
      this.searchData(1, val)
    },
    handleCurrentChange(val) {
      this.searchData(val, this.currentPageSize)
    },
    rowCellClick(row, col, $event) {
      this.curIndex = this.gridData.findIndex(item => item._id === row._id)
    },
    sureSelectData() {
      if (this.curIndex === -1 || !this.gridData.length) {
        Message({
          message: '请选择一个编码',
          type: 'error',
          duration: 2 * 1000
        })
        return false
      } else {
        this.selectData(this.gridData[this.curIndex])
      }
    },
    selectData(row, event) {
      this.$emit('combineSelect', {
        'goodsHsCode': row.hsCode,
        'firstUnit': row.firstUnit,
        'quantityUnit': row.firstUnit,
        'firstUnitName': row.firstUnitName,
        'quantityUnitName': row.firstUnitName,
        'secondUnit': row.secondUnit !== '' ? row.secondUnit : '',
        'secondUnitName': row.secondUnit !== '' ? row.secondUnitName : ''
      })
      this.hide()
    },
    closeWin() {
      this.hide()
    }
  }
}
</script>
